<template>
  <el-dialog :model-value="dialogVisible" title="创建网络图片" :before-close="cancelDialog" width="35%">
    <el-form :model="createFormData" :rules="rules" label-width="100px" ref="createFormRef">
      <el-form-item label="所属部门" prop="groupid_list" class="chkboxgroup-list">
        <el-checkbox-group v-model="createFormData.groupid_list">
          <el-checkbox
                  v-for="group in groupList"
                  :key="group.groupid"
                  :label="group.groupid"
                  name="groupid_list"
          >{{group.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item prop="name" label="图片名称">
        <el-input placeholder="请输入图片名称" v-model="createFormData.name" />
      </el-form-item>
      <el-form-item prop="url" label="URL地址">
        <el-input placeholder="请输入图片URL地址" v-model="createFormData.url" />
      </el-form-item>
      <el-form-item prop="layout" label="画幅类型">
        <el-select placeholder="请选择图片的画幅类型" clearable v-model="createFormData.layout">
          <el-option
              v-for="item in layoutList"
              :key="item.layoutid"
              :value="item.layoutid"
              :label="item.layoutname"
            />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div align="center">
        <el-button type="default" size="small" @click="cancelDialog">取消</el-button>
        <el-button type="primary" size="small" @click="handleSubmit">创建</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
  import {toRef, reactive, ref} from 'vue'
  import { layoutList} from "@/utils/usage-config";
  import {createThirdImage} from "@/api/media/image";
  import {ElMessage} from 'element-plus'

  export default {
    name: "CreateThridImage",
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      groupList: {
        type: Array,
        default() {
          return []
        }
      },
      formData: {
        type: Object
      }
    },
    emits: ['cancelCreateDialog', 'reloadDataList'],
    setup(props, context) {
      const dialogVisible = toRef(props, 'visible')
      const createFormData = toRef(props, 'formData')
      const rules = reactive({
        groupid_list: [{required: true, message: '请选择所属部门', trigger: 'change'}],
        name: [{required: true, message: '请输入图片名称', trigger: 'blur'}],
        url: [{required: true, message: '请输入图片地址', trigger: 'blur'}],
      })
      const createFormRef = ref(null)

      const cancelDialog = () => {
        context.emit('cancelCreateDialog')
      }
      const handleSubmit = () => {
        createFormRef.value.validate(valid => {
          if (valid) {
            createThirdImage(createFormData.value).then(response => {
              if (response.errcode == 0) {
                ElMessage({type: 'success', message: response.msg, duration: 2000})
                cancelDialog()
                context.emit('reloadDataList')
              } else {
                ElMessage({type: 'error', message: response.msg, duration: 2000})
              }
            })
          }
        })
      }

      return {
        dialogVisible,
        cancelDialog,
        handleSubmit,
        createFormData,
        layoutList,
        rules,
        createFormRef,
      }
    }

  }
</script>
<style scoped>
.el-input,.el-select{
    width:90%;
  }
</style>
<style lang="scss">
  

</style>
